<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { centerMap, GETNOBASE } from '@/api'
import { registerMap, getMap } from 'echarts/core'
import { optionHandle, regionCodes } from './center.map'
import BorderBox13 from '@/components/datav/border-box-13'
import { ElMessage } from 'element-plus'

import type { MapdataType } from './center.map'

const option = ref({})
const code = ref('china') //china 代表中国 其他地市是行政编码

withDefaults(
    defineProps<{
        // 结束数值
        title: number | string
    }>(),
    {
        title: '地图'
    }
)

const dataSetHandle = async (regionCode: string, list: object[]) => {
    const geojson: any = await getGeojson(regionCode)
    let cityCenter: any = {}
    let mapData: MapdataType[] = []
    //获取当前地图每块行政区中心点
    geojson.features.forEach((element: any) => {
        cityCenter[element.properties.name] = element.properties.centroid || element.properties.center
    })
    //当前中心点如果有此条数据中心点则赋值x，y当然这个x,y也可以后端返回进行大点，前端省去多行代码
    list.forEach((item: any) => {
        if (cityCenter[item.name]) {
            mapData.push({
                name: item.name,
                value: cityCenter[item.name].concat(item.value)
            })
        }
    })
    await nextTick()

    option.value = optionHandle(regionCode, list, mapData)
}

const getData = async (regionCode: string) => {
    centerMap({ regionCode: regionCode })
        .then((res) => {
            console.log('中上--设备分布', res)
            if (res.success) {
                dataSetHandle(res.data.regionCode, res.data.dataList)
            } else {
                ElMessage.error(res.msg)
            }
        })
        .catch((err) => {
            ElMessage.error(err)
        })
}
const getGeojson = (regionCode: string) => {
    return new Promise<boolean>(async (resolve) => {
        let mapjson = getMap(regionCode)
        console.log(mapjson);
        
        if (mapjson) {
            mapjson = mapjson.geoJSON
            resolve(mapjson)
        } else {
            mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then((data) => data)
            code.value = regionCode
            registerMap(regionCode, {
                geoJSON: mapjson as any,
                specialAreas: {}
            })
            resolve(mapjson)
        }
    })
}
getData(code.value)

const mapClick = (params: any) => {
    // console.log(params);
    let xzqData = regionCodes[params.name]
    console.log(xzqData);
    
    if (xzqData) {
        getData(xzqData.adcode)
    } else {
        window['$message'].warning('暂无下级地市')
    }
}
</script>

<template>
    <div class="centermap">
        <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">中国</div>
        <v-chart class="chart" :autoresize="true" :option="option" ref="centerMapRef" @click="mapClick"
                 v-if="JSON.stringify(option) != '{}'" />
    </div>
</template>

<style scoped lang="scss">
.centermap {
    height: calc(100% - 60px);
    width: 100%;
    .mapwrap {
        .quanguo {
            border: 1px solid #00eded;
            border-radius: 10px;
            color: #00f7f6;
            text-align: center;
            line-height: 26px;
            letter-spacing: 6px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
            z-index: 10;
        }
    }
}
</style>
